<div data-ng-controller="ContactCtrl">
	<div class="page-header">
		<h3>
			Contacts
			<button type="button" class="btn btn-default" ng-click="gotoContactPage({})">
				<i class="fa fa-plus"> Add</i>
			</button>
			<div class="pull-right">
				<div class="btn-toolbar" role="toolbar" aria-label="...">
					<div class="btn-group" role="group" aria-label="...">
						<button type="button" class="btn btn-default"
							ng-class="{active: viewType == 'grid'}"
							ng-click="changeView('grid')">
							<i class="fa fa-th"></i>
						</button>
						<button type="button" class="btn btn-default"
							ng-class="{active: viewType == 'list'}"
							ng-click="changeView('list')">
							<i class="fa fa-th-list"></i>
						</button>
					</div>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle"
							data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							<i class="fa fa-download"></i> <span class="caret"></span>
						</button>
						<ul class="dropdown-menu dropdown-menu-right">
							<li><a href="">CSV</a></li>
							<li><a href="">XLS</a></li>
						</ul>
					</div>
					<div class="btn-group">
						<button type="button" class="btn btn-default">
							<i class="fa fa-print"></i>
						</button>
					</div>
				</div>
			</div>
		</h3>
	</div>
	<div class="row">
		<div class="col-md-9">
			<div class="row" ng-if="viewType == 'grid'">
				<div class="col-xs-12 col-sm-6 col-md-4"
					dir-paginate="contact in contacts | itemsPerPage: 15"
					total-items="totalContacts" current-page="pagination.current">
					<div class="panel panel-default" ng-dblclick="gotoContactPage(contact)">
					  <div class="panel-body">
					    <div class="media">
							<div class="media-left">
								<img class="media-object img-circle img48_48"
									src="images/dp.jpg">
							</div>
							<div class="media-body">
								<h4 class="media-heading">
									{{contact.first}} {{contact.last}}
									<div class="pull-right"><a href="" ng-click="deleteContact(contact)"><i class="fa fa-close"></i></a></div>
								</h4>
								<p><i class="fa fa-phone"></i> {{contact.phone}}</p>
							</div>
						</div>
					  </div>
					</div>
				</div>
			</div>
			<div ng-if="viewType == 'list'">
				<table class="table table-hover">
					<thead>
						<tr>
							<th></th>
							<th><i class="fa fa-user"></i> Name</th>
							<th><i class="fa fa-phone"></i> Contact No.</th>
							<th>Delete</th>
						</tr>
					</thead>
					<tbody>
						<tr dir-paginate="contact in contacts | itemsPerPage: 15"
							total-items="totalContacts" current-page="pagination.current" ng-dblclick="gotoContactPage(contact)">
							<td><img class="media-object  img24_24"
									src="images/dp.jpg"></td>
							<td>{{contact.first}} {{contact.last}}</td>
							<td>{{contact.phone}}</td>
							<td><a href="" ng-click="deleteContact(contact)"><i class="fa fa-close"></i></a></td>
						</tr>
					</tbody>
				</table>
			</div>
			<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
		</div>
		<div class="col-md-3">Search</div>
	</div>
</div>
